<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset="utf-8">
    
    <title>让 Hexo 博客支持本地站内搜索 | 夏红林</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="前言最近给 Yelee 主题加上了本地搜索功能，终于能在自己的博客里愉快地搜索资料了。大致思路来源于 HaHack 的 教程，根据需要做了些调整。重新整理一下本地搜索折腾记录，分享于此。">
<meta property="og:type" content="article">
<meta property="og:title" content="让 Hexo 博客支持本地站内搜索">
<meta property="og:url" content="http://xiahl.top/2016/05/31/hexo-local-search/index.html">
<meta property="og:site_name" content="夏红林">
<meta property="og:description" content="前言最近给 Yelee 主题加上了本地搜索功能，终于能在自己的博客里愉快地搜索资料了。大致思路来源于 HaHack 的 教程，根据需要做了些调整。重新整理一下本地搜索折腾记录，分享于此。">
<meta property="og:image" content="http://xiahl.top/resources/hexo-local-search.gif">
<meta property="og:updated_time" content="2016-06-27T12:27:22.189Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="让 Hexo 博客支持本地站内搜索">
<meta name="twitter:description" content="前言最近给 Yelee 主题加上了本地搜索功能，终于能在自己的博客里愉快地搜索资料了。大致思路来源于 HaHack 的 教程，根据需要做了些调整。重新整理一下本地搜索折腾记录，分享于此。">
<meta name="twitter:image" content="http://xiahl.top/resources/hexo-local-search.gif">
    

    

    

    <link rel="stylesheet" href="/icarus/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/icarus/vendor/open-sans/styles.css">
    <link rel="stylesheet" href="/icarus/vendor/source-code-pro/styles.css">

    <link rel="stylesheet" href="/icarus/css/style.css">

    <!-- jQuery -->
    <script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
    
    
        <link rel="stylesheet" href="/icarus/vendor/fancybox/jquery.fancybox.css">
    
    
    
    

</head>
<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/icarus/" id="logo">
                <i class="logo"></i>
                <span class="site-title">夏红林</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/icarus/.">Home</a>
                
                    <a class="main-nav-link" href="/icarus/archives">Archives</a>
                
                    <a class="main-nav-link" href="/icarus/categories">Categories</a>
                
                    <a class="main-nav-link" href="/icarus/tags">Tags</a>
                
                    <a class="main-nav-link" href="/icarus/about">About</a>
                
                    <a class="main-nav-link" href="http://xiahl.top/">Theme</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="/icarus/css/images/avatar.png" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/icarus/',
        CONTENT_URL: '/icarus/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/icarus/js/insight.js"></script>

</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/icarus/.">Home</a></td>
                
                    <td><a class="main-nav-link" href="/icarus/archives">Archives</a></td>
                
                    <td><a class="main-nav-link" href="/icarus/categories">Categories</a></td>
                
                    <td><a class="main-nav-link" href="/icarus/tags">Tags</a></td>
                
                    <td><a class="main-nav-link" href="/icarus/about">About</a></td>
                
                    <td><a class="main-nav-link" href="http://xiahl.top/">Theme</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="/icarus/css/images/avatar.png" />
            <h2 id="name">Tianxiamucun</h2>
            <h3 id="title">Web Developer &amp; Designer</h3>
            <span id="location"><i class="fa fa-map-marker"></i>Harbin, China</span>
            <a id="follow" target="_blank" href="https://github.com/Xiahl1990">关注我</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                9
                <span>文章</span>
            </div>
            <div class="article-info-block">
                7
                <span>标签</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    
                    <td>
                        <a href="https://github.com/Xiahl1990/hexo-theme-tianxiamucun" target="_blank" title="github" class=tooltip>
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/icarus/" target="_blank" title="twitter" class=tooltip>
                            <i class="fa fa-twitter"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/icarus/" target="_blank" title="facebook" class=tooltip>
                            <i class="fa fa-facebook"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/icarus/" target="_blank" title="dribbble" class=tooltip>
                            <i class="fa fa-dribbble"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/icarus/" target="_blank" title="rss" class=tooltip>
                            <i class="fa fa-rss"></i>
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main"><article id="post-hexo-local-search" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            让 Hexo 博客支持本地站内搜索
        </h1>
    

                <div class="article-meta">
                    
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/icarus/2016/05/31/hexo-local-search/">
            <time datetime="2016-05-31T05:50:19.000Z" itemprop="datePublished">2016-05-31</time>
        </a>
    </div>


                    
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/icarus/categories/术业专攻/">术业专攻</a>
    </div>

                    
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/icarus/tags/Hexo/">Hexo</a>, <a class="tag-link" href="/icarus/tags/JavaScript/">JavaScript</a>, <a class="tag-link" href="/icarus/tags/jQuery/">jQuery</a>
    </div>

                </div>
            </header>
        
        <div class="article-entry" itemprop="articleBody">
        
            
                <div id="toc" class="toc-article">
                <strong class="toc-title">文章目录</strong>
                    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#intro"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#索引生成"><span class="toc-number">2.</span> <span class="toc-text">索引生成</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#界面结构"><span class="toc-number">3.</span> <span class="toc-text">界面结构</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#功能代码"><span class="toc-number">4.</span> <span class="toc-text">功能代码</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#基础代码"><span class="toc-number">4.1.</span> <span class="toc-text">基础代码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#调用函数"><span class="toc-number">4.2.</span> <span class="toc-text">调用函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#搜索重置"><span class="toc-number">4.3.</span> <span class="toc-text">搜索重置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#屏蔽回车"><span class="toc-number">4.4.</span> <span class="toc-text">屏蔽回车</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#无搜索结果"><span class="toc-number">4.5.</span> <span class="toc-text">无搜索结果</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS-样式"><span class="toc-number">5.</span> <span class="toc-text">CSS 样式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#一些不足"><span class="toc-number">6.</span> <span class="toc-text">一些不足</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#相关链接"><span class="toc-number">7.</span> <span class="toc-text">相关链接</span></a></li></ol>
                </div>
            
            <p></p><h2 id="intro">前言</h2>最近给 <a href="https://github.com/MOxFIVE/hexo-theme-yelee" target="_blank" rel="external">Yelee</a> 主题加上了本地搜索功能，终于能在自己的博客里愉快地搜索资料了。大致思路来源于 HaHack 的 <a href="http://hahack.com/codes/local-search-engine-for-hexo/" target="_blank" rel="external">教程</a>，根据需要做了些调整。重新整理一下本地搜索折腾记录，分享于此。<p></p>
<a id="more"></a>
<hr>
<p><img src="/resources/hexo-local-search.gif" alt="Hexo Local Search"></p>
<h2 id="索引生成"><a href="#索引生成" class="headerlink" title="索引生成"></a>索引生成</h2><p>要使用搜索，必须先生成博客索引数据，Hexo 可以通过插件生成：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save hexo-generator-search</span><br></pre></td></tr></table></figure></p>
<p>插件默认只索引文章(post)，要想页面(page)也能被检索，只需要在 Hexo 站点 <code>_config.yml</code> 中添加如下配置即可：<br><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line"><span class="attr">  path:</span> search.xml</span><br><span class="line"><span class="attr">  field:</span> all</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>更多配置说明可到插件页面查看：<a href="https://github.com/PaicHyperionDev/hexo-generator-search" target="_blank" rel="external">hexo-generator-search</a></p>
</blockquote>
<h2 id="界面结构"><a href="#界面结构" class="headerlink" title="界面结构"></a>界面结构</h2><p>因为自己博客是双栏，顺手就把搜索结果放在边栏中了，大致 HTML 结构如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">id</span>=<span class="string">"search-form"</span>&gt;</span> <span class="comment">&lt;!-- 搜索框相关 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">id</span>=<span class="string">"local-search-input"</span> <span class="attr">name</span>=<span class="string">"q"</span> <span class="attr">results</span>=<span class="string">"0"</span> <span class="attr">placeholder</span>=<span class="string">"search..."</span> <span class="attr">class</span>=<span class="string">"search form-control"</span> <span class="attr">autocomplete</span>=<span class="string">"off"</span> <span class="attr">autocorrect</span>=<span class="string">"off"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-times"</span> <span class="attr">onclick</span>=<span class="string">"resetSearch()"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> <span class="comment">&lt;!-- 清空/重置搜索框 --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"local-search-result"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span> <span class="comment">&lt;!-- 搜索结果区 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">'no-result'</span>&gt;</span>No results found <span class="tag">&lt;/<span class="name">p</span>&gt;</span> <span class="comment">&lt;!-- 无匹配时显示，注意请在 CSS 中设置默认隐藏 --&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>搜索重置按钮使用了 <a href="http://fontawesome.io/" target="_blank" rel="external">Font Awesome</a> 图标，可按需更换</p>
</blockquote>
<h2 id="功能代码"><a href="#功能代码" class="headerlink" title="功能代码"></a>功能代码</h2><h3 id="基础代码"><a href="#基础代码" class="headerlink" title="基础代码"></a>基础代码</h3><blockquote>
<p>基础搜索函数 <code>(jQuery)</code> 来源于 HaHack 的教程，个人进行了些调整：<br>1.新标签中打开文章页面；2.减少截取的字符数；3.去掉部分非必要的代码</p>
</blockquote>
<ul>
<li>使用时将下边代码保存为 js 文件并在页面中的合适位置引入</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// A local search script with the help of [hexo-generator-search](https://github.com/PaicHyperionDev/hexo-generator-search)</span></span><br><span class="line"><span class="comment">// Copyright (C) 2015 </span></span><br><span class="line"><span class="comment">// Joseph Pan &lt;http://github.com/wzpan&gt;</span></span><br><span class="line"><span class="comment">// Shuhao Mao &lt;http://github.com/maoshuhao&gt;</span></span><br><span class="line"><span class="comment">// Edited by MOxFIVE &lt;http://github.com/MOxFIVE&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> searchFunc = <span class="function"><span class="keyword">function</span>(<span class="params">path, search_id, content_id</span>) </span>&#123;</span><br><span class="line"><span class="meta">    'use strict'</span>;</span><br><span class="line">    $.ajax(&#123;</span><br><span class="line">        url: path,</span><br><span class="line">        dataType: <span class="string">"xml"</span>,</span><br><span class="line">        success: <span class="function"><span class="keyword">function</span>(<span class="params"> xmlResponse </span>) </span>&#123;</span><br><span class="line">            <span class="comment">// get the contents from search data</span></span><br><span class="line">            <span class="keyword">var</span> datas = $( <span class="string">"entry"</span>, xmlResponse ).map(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">                <span class="keyword">return</span> &#123;</span><br><span class="line">                    title: $( <span class="string">"title"</span>, <span class="keyword">this</span> ).text(),</span><br><span class="line">                    content: $(<span class="string">"content"</span>,<span class="keyword">this</span>).text(),</span><br><span class="line">                    url: $( <span class="string">"url"</span> , <span class="keyword">this</span>).text()</span><br><span class="line">                &#125;;</span><br><span class="line">            &#125;).get();</span><br><span class="line">            <span class="keyword">var</span> $input = <span class="built_in">document</span>.getElementById(search_id);</span><br><span class="line">            <span class="keyword">var</span> $resultContent = <span class="built_in">document</span>.getElementById(content_id);</span><br><span class="line">            $input.addEventListener(<span class="string">'input'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="keyword">var</span> str=<span class="string">'&lt;ul class=\"search-result-list\"&gt;'</span>;                </span><br><span class="line">                <span class="keyword">var</span> keywords = <span class="keyword">this</span>.value.trim().toLowerCase().split(<span class="regexp">/[\s\-]+/</span>);</span><br><span class="line">                $resultContent.innerHTML = <span class="string">""</span>;</span><br><span class="line">                <span class="keyword">if</span> (<span class="keyword">this</span>.value.trim().length &lt;= <span class="number">0</span>) &#123;</span><br><span class="line">                    <span class="keyword">return</span>;</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="comment">// perform local searching</span></span><br><span class="line">                datas.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">data</span>) </span>&#123;</span><br><span class="line">                    <span class="keyword">var</span> isMatch = <span class="literal">true</span>;</span><br><span class="line">                    <span class="keyword">var</span> content_index = [];</span><br><span class="line">                    <span class="keyword">var</span> data_title = data.title.trim().toLowerCase();</span><br><span class="line">                    <span class="keyword">var</span> data_content = data.content.trim().replace(<span class="regexp">/&lt;[^&gt;]+&gt;/g</span>,<span class="string">""</span>).toLowerCase();</span><br><span class="line">                    <span class="keyword">var</span> data_url = data.url;</span><br><span class="line">                    <span class="keyword">var</span> index_title = <span class="number">-1</span>;</span><br><span class="line">                    <span class="keyword">var</span> index_content = <span class="number">-1</span>;</span><br><span class="line">                    <span class="keyword">var</span> first_occur = <span class="number">-1</span>;</span><br><span class="line">                    <span class="comment">// only match artiles with not empty titles and contents</span></span><br><span class="line">                    <span class="keyword">if</span>(data_title != <span class="string">''</span> &amp;&amp; data_content != <span class="string">''</span>) &#123;</span><br><span class="line">                        keywords.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">keyword, i</span>) </span>&#123;</span><br><span class="line">                            index_title = data_title.indexOf(keyword);</span><br><span class="line">                            index_content = data_content.indexOf(keyword);</span><br><span class="line">                            <span class="keyword">if</span>( index_title &lt; <span class="number">0</span> &amp;&amp; index_content &lt; <span class="number">0</span> )&#123;</span><br><span class="line">                                isMatch = <span class="literal">false</span>;</span><br><span class="line">                            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                                <span class="keyword">if</span> (index_content &lt; <span class="number">0</span>) &#123;</span><br><span class="line">                                    index_content = <span class="number">0</span>;</span><br><span class="line">                                &#125;</span><br><span class="line">                                <span class="keyword">if</span> (i == <span class="number">0</span>) &#123;</span><br><span class="line">                                    first_occur = index_content;</span><br><span class="line">                                &#125;</span><br><span class="line">                            &#125;</span><br><span class="line">                        &#125;);</span><br><span class="line">                    &#125;</span><br><span class="line">                    <span class="comment">// show search results</span></span><br><span class="line">                    <span class="keyword">if</span> (isMatch) &#123;</span><br><span class="line">                        str += <span class="string">"&lt;li&gt;&lt;a href='"</span>+ data_url +<span class="string">"' class='search-result-title' target='_blank'&gt;"</span>+ <span class="string">"&gt; "</span> + data_title +<span class="string">"&lt;/a&gt;"</span>;</span><br><span class="line">                        <span class="keyword">var</span> content = data.content.trim().replace(<span class="regexp">/&lt;[^&gt;]+&gt;/g</span>,<span class="string">""</span>);</span><br><span class="line">                        <span class="keyword">if</span> (first_occur &gt;= <span class="number">0</span>) &#123;</span><br><span class="line">                            <span class="comment">// cut out characters</span></span><br><span class="line">                            <span class="keyword">var</span> start = first_occur - <span class="number">6</span>;</span><br><span class="line">                            <span class="keyword">var</span> end = first_occur + <span class="number">6</span>;</span><br><span class="line">                            <span class="keyword">if</span>(start &lt; <span class="number">0</span>)&#123;</span><br><span class="line">                                start = <span class="number">0</span>;</span><br><span class="line">                            &#125;</span><br><span class="line">                            <span class="keyword">if</span>(start == <span class="number">0</span>)&#123;</span><br><span class="line">                                end = <span class="number">10</span>;</span><br><span class="line">                            &#125;</span><br><span class="line">                            <span class="keyword">if</span>(end &gt; content.length)&#123;</span><br><span class="line">                                end = content.length;</span><br><span class="line">                            &#125;</span><br><span class="line">                            <span class="keyword">var</span> match_content = content.substr(start, end); </span><br><span class="line">                            <span class="comment">// highlight all keywords</span></span><br><span class="line">                            keywords.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">keyword</span>)</span>&#123;</span><br><span class="line">                                <span class="keyword">var</span> regS = <span class="keyword">new</span> <span class="built_in">RegExp</span>(keyword, <span class="string">"gi"</span>);</span><br><span class="line">                                match_content = match_content.replace(regS, <span class="string">"&lt;em class=\"search-keyword\"&gt;"</span>+keyword+<span class="string">"&lt;/em&gt;"</span>);</span><br><span class="line">                            &#125;)</span><br><span class="line">                            str += <span class="string">"&lt;p class=\"search-result\"&gt;"</span> + match_content +<span class="string">"...&lt;/p&gt;"</span></span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;)</span><br><span class="line">                $resultContent.innerHTML = str;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="调用函数"><a href="#调用函数" class="headerlink" title="调用函数"></a>调用函数</h3><ul>
<li><code>search.xml</code> 使用默认路径，可以直接把下面代码放到 js 文件中</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> path = <span class="string">"/search.xml"</span>;</span><br><span class="line">searchFunc(path, <span class="string">'local-search-input'</span>, <span class="string">'local-search-result'</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>上面的函数， <code>search.xml</code> 文件会跟随页面一起加载，如果索引文件太大，可能会影响页面加载速度，可以将其调整为<code>激活搜索框</code>时再下载所需文件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> inputArea = <span class="built_in">document</span>.querySelector(<span class="string">"#local-search-input"</span>);</span><br><span class="line"><span class="keyword">var</span> getSearchFile = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> path = <span class="string">"/search.xml"</span>;</span><br><span class="line">    searchFunc(path, <span class="string">'local-search-input'</span>, <span class="string">'local-search-result'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">inputArea.onfocus = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; getSearchFile() &#125;</span><br></pre></td></tr></table></figure>
<h3 id="搜索重置"><a href="#搜索重置" class="headerlink" title="搜索重置"></a>搜索重置</h3><ul>
<li>提供按钮用于清空搜索结果和重置搜索框，按钮已经绑定了点击事件，直接写函数就行</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> $resetButton = $(<span class="string">"#search-form .fa-times"</span>);</span><br><span class="line"><span class="keyword">var</span> $resultArea = $(<span class="string">"#local-search-result"</span>);</span><br><span class="line"></span><br><span class="line">inputArea.oninput = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; $resetButton.show(); &#125;</span><br><span class="line">resetSearch = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $resultArea.html(<span class="string">""</span>);</span><br><span class="line">    <span class="built_in">document</span>.querySelector(<span class="string">"#search-form"</span>).reset();</span><br><span class="line">    $resetButton.hide();</span><br><span class="line">    $(<span class="string">".no-result"</span>).hide();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="屏蔽回车"><a href="#屏蔽回车" class="headerlink" title="屏蔽回车"></a>屏蔽回车</h3><ul>
<li>虽然用了表单但其实并没有数据要提交，所以这里需要手动屏蔽掉回车键</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">inputArea.onkeydown = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="keyword">if</span>(event.keyCode==<span class="number">13</span>) <span class="keyword">return</span> <span class="literal">false</span>&#125;</span><br></pre></td></tr></table></figure>
<h3 id="无搜索结果"><a href="#无搜索结果" class="headerlink" title="无搜索结果"></a>无搜索结果</h3><ul>
<li>无搜索结果时，显示指定的提示内容。</li>
<li>原本想在基础搜索函数上改，折腾无果，只能曲线救国，通过监听搜索区内容变动来判断是否有匹配的内容</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">$resultArea.bind(<span class="string">"DOMNodeRemoved DOMNodeInserted"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (!$(e.target).text()) &#123;</span><br><span class="line">        $(<span class="string">".no-result"</span>).show(<span class="number">200</span>); </span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      $(<span class="string">".no-result"</span>).hide();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="CSS-样式"><a href="#CSS-样式" class="headerlink" title="CSS 样式"></a>CSS 样式</h2><p>样式部分按自己喜好设计即可，下面是个人目前使用的样式，可参考<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*搜索框*/</span></span><br><span class="line"><span class="selector-class">.search</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">68%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">font-family</span>: inherit;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid transparent;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">2px</span> solid <span class="number">#d3d3d3</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.65</span>;</span><br><span class="line">  <span class="attribute">background</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.search</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#d3d3d3</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="built_in">rgba</span>(0,0,0,0.3);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*搜索重置按钮*/</span></span><br><span class="line"><span class="selector-id">#search-form</span> <span class="selector-class">.fa-times</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">1px</span> <span class="number">0.7em</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">3px</span> <span class="built_in">rgba</span>(0,0,0,0.15);</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#808080</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#search-form</span> <span class="selector-class">.fa-times</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#d3d3d3</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#search-form</span> <span class="selector-class">.fa-times</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">zoom</span>: <span class="number">1.1</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">1px</span> <span class="number">0.6em</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#d3d3d3</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">6px</span> <span class="built_in">rgba</span>(0,0,0,0.25);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*搜索结果区*/</span></span><br><span class="line"><span class="selector-id">#local-search-result</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: auto -<span class="number">12%</span> auto -<span class="number">6%</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.9em</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: left;</span><br><span class="line">  <span class="attribute">word-break</span>: break-all;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#local-search-result</span> <span class="selector-tag">ul</span><span class="selector-class">.search-result-list</span> <span class="selector-tag">li</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">font-weight</span>: normal;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*单条搜索结果*/</span></span><br><span class="line"><span class="selector-id">#local-search-result</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0.5em</span> auto;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">2px</span> solid <span class="number">#d3d3d3</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#local-search-result</span> <span class="selector-class">.search-result-list</span> <span class="selector-tag">li</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(158,188,226,0.21);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="built_in">rgba</span>(0,0,0,0.2);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*匹配的标题*/</span></span><br><span class="line"><span class="selector-id">#local-search-result</span> <span class="selector-tag">a</span><span class="selector-class">.search-result-title</span> &#123;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.2</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#708090</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*搜索预览段落*/</span></span><br><span class="line"><span class="selector-id">#local-search-result</span> <span class="selector-tag">p</span><span class="selector-class">.search-result</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0.4em</span> auto;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.2em</span>;</span><br><span class="line">  <span class="attribute">max-height</span>: <span class="number">3.6em</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.8em</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: justify;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#808080</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*匹配的关键词*/</span></span><br><span class="line"><span class="selector-id">#local-search-result</span> <span class="selector-tag">em</span><span class="selector-class">.search-keyword</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#f58e90</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">1px</span> dashed <span class="number">#f58e90</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.85em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*无匹配搜索结果时显示*/</span></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.no-result</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">2em</span> <span class="number">0</span> <span class="number">2em</span> <span class="number">6%</span>;</span><br><span class="line">  <span class="attribute">padding-bottom</span>: <span class="number">0.5em</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: left;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#808080</span>;</span><br><span class="line">  <span class="attribute">font-family</span>: font-serif serif;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">2px</span> solid <span class="number">#d3d3d3</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="一些不足"><a href="#一些不足" class="headerlink" title="一些不足"></a>一些不足</h2><blockquote>
<ul>
<li>[ ] 如果文章很多，索引文件可能很大，无论是随页面下载还是激活搜索框再下载，似乎都不理想；</li>
<li>[ ] 搜索结果中全部内容都转成了小写，应该有办法忽略大小写的同时，保持文本原始大小写格式；</li>
<li>[ ] 使用自动补全填上的内容并不能立即显示搜索结果，待改进。</li>
</ul>
</blockquote>
<h2 id="相关链接"><a href="#相关链接" class="headerlink" title="相关链接"></a>相关链接</h2><ol>
<li><strong><em>jQuery-based Local Search Engine for Hexo</em></strong> by <strong>HaHack</strong> on <code>2015/10/08</code>: <a href="http://hahack.com/codes/local-search-engine-for-hexo/" target="_blank" rel="external">http://hahack.com/codes/local-search-engine-for-hexo/</a></li>
<li><strong><em>feat: Local Site Search | 本地站内搜索</em></strong> by <strong>MOxFIVE</strong> on <code>2016/05/25</code>: <a href="https://github.com/MOxFIVE/hexo-theme-yelee/commit/0280f6a17d1a0fa1f52056856082e022dfac220c" target="_blank" rel="external">https://github.com/MOxFIVE/hexo-theme-yelee/commit/0280f6a17d1a0fa1f52056856082e022dfac220c</a></li>
<li><strong>hexo-generator-search</strong>: <a href="https://github.com/PaicHyperionDev/hexo-generator-search" target="_blank" rel="external">https://github.com/PaicHyperionDev/hexo-generator-search</a></li>
</ol>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="http://xiahl.top/icarus/2016/05/31/hexo-local-search/" data-id="ciq3woaym000jr4vqze0404ki" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    
        <a href="http://xiahl.top/icarus/2016/05/31/hexo-local-search/#comments" class="article-comment-link disqus-comment-count" data-disqus-url="http://xiahl.top/icarus/2016/05/31/hexo-local-search/">评论</a>
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
        <a href="/icarus/2016/06/13/hexo-collapsible-toc/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">上一篇</strong>
            <div class="article-nav-title">
                
                    为 Hexo 添加可折叠的文章目录
                
            </div>
        </a>
    
    
        <a href="/icarus/2016/03/27/hexo-browsersync/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">下一篇</strong>
            <div class="article-nav-title">Hexo 页面自动刷新与移动端调试</div>
        </a>
    
</nav>


    
</article>


    
    <section id="comments">
    
        
    <div id="disqus_thread">
        <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>

    
    </section>

</section>
            
                <aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="">
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/icarus/2016/06/13/hexo-collapsible-toc/" class="thumbnail">
    
    
        <span style="background-image:url(/resources/feat.toc.gif)" alt="为 Hexo 添加可折叠的文章目录" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/icarus/categories/术业专攻/">术业专攻</a></p>
                            <p class="item-title"><a href="/icarus/2016/06/13/hexo-collapsible-toc/" class="title">为 Hexo 添加可折叠的文章目录</a></p>
                            <p class="item-date"><time datetime="2016-06-13T12:06:30.000Z" itemprop="datePublished">2016-06-13</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/icarus/2016/05/31/hexo-local-search/" class="thumbnail">
    
    
        <span style="background-image:url(/resources/hexo-local-search.gif)" alt="让 Hexo 博客支持本地站内搜索" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/icarus/categories/术业专攻/">术业专攻</a></p>
                            <p class="item-title"><a href="/icarus/2016/05/31/hexo-local-search/" class="title">让 Hexo 博客支持本地站内搜索</a></p>
                            <p class="item-date"><time datetime="2016-05-31T05:50:19.000Z" itemprop="datePublished">2016-05-31</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/icarus/2016/03/27/hexo-browsersync/" class="thumbnail">
    
    
        <span style="background-image:url(/resources/browsersync.gif)" alt="Hexo 页面自动刷新与移动端调试" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/icarus/categories/术业专攻/">术业专攻</a></p>
                            <p class="item-title"><a href="/icarus/2016/03/27/hexo-browsersync/" class="title">Hexo 页面自动刷新与移动端调试</a></p>
                            <p class="item-date"><time datetime="2016-03-26T16:17:50.000Z" itemprop="datePublished">2016-03-27</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/icarus/2016/01/10/hexo-post-version-control/" class="thumbnail">
    
    
        <span style="background-image:url(/resources/version-control.png)" alt="关联 GitHub, 让 Hexo 支持查看文章更新历史" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/icarus/categories/术业专攻/">术业专攻</a></p>
                            <p class="item-title"><a href="/icarus/2016/01/10/hexo-post-version-control/" class="title">关联 GitHub, 让 Hexo 支持查看文章更新历史</a></p>
                            <p class="item-date"><time datetime="2016-01-10T14:38:01.000Z" itemprop="datePublished">2016-01-10</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/icarus/2016/01/02/hexo-comments/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/icarus/categories/术业专攻/">术业专攻</a></p>
                            <p class="item-title"><a href="/icarus/2016/01/02/hexo-comments/" class="title">为 Hexo 主题添加评论模块 — Disqus, 多说, 友言</a></p>
                            <p class="item-date"><time datetime="2016-01-01T17:26:48.000Z" itemprop="datePublished">2016-01-02</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/icarus/categories/术业专攻/">术业专攻</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/icarus/categories/自用笔记/">自用笔记</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/icarus/categories/自用笔记/术业专攻/">术业专攻</a><span class="category-list-count">1</span></li></ul></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">归档</h3>
        <div class="widget">
            <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/icarus/archives/2016/06/">六月 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/icarus/archives/2016/05/">五月 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/icarus/archives/2016/03/">三月 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/icarus/archives/2016/01/">一月 2016</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/icarus/archives/2015/11/">十一月 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/icarus/archives/2015/10/">十月 2015</a><span class="archive-list-count">2</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签</h3>
        <div class="widget">
            <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/Browsersync/">Browsersync</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/CSS/">CSS</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/GitHub/">GitHub</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/Hexo/">Hexo</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/JavaScript/">JavaScript</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/TagCloud/">TagCloud</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/jQuery/">jQuery</a><span class="tag-list-count">2</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签云</h3>
        <div class="widget tagcloud">
            <a href="/icarus/tags/Browsersync/" style="font-size: 10px;">Browsersync</a> <a href="/icarus/tags/CSS/" style="font-size: 10px;">CSS</a> <a href="/icarus/tags/GitHub/" style="font-size: 15px;">GitHub</a> <a href="/icarus/tags/Hexo/" style="font-size: 20px;">Hexo</a> <a href="/icarus/tags/JavaScript/" style="font-size: 10px;">JavaScript</a> <a href="/icarus/tags/TagCloud/" style="font-size: 10px;">TagCloud</a> <a href="/icarus/tags/jQuery/" style="font-size: 15px;">jQuery</a>
        </div>
    </div>

    
        
    <div class="widget-wrap widget-list">
        <h3 class="widget-title">链接</h3>
        <div class="widget">
            <ul>
                
                    <li>
                        <a href="http://hexo.io">Hexo</a>
                    </li>
                
            </ul>
        </div>
    </div>


    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>
            
        </div>
        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy; 2016 夏红林<br>
            Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a href="http://github.com/ppoffice">PPOffice</a>
        </div>
    </div>
</footer>
        
    
    <script>
    var disqus_shortname = 'xiahl';
    
    
    var disqus_url = 'http://xiahl.top/icarus/2016/05/31/hexo-local-search/';
    
    (function() {
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    </script>



    
        <script src="/icarus/vendor/fancybox/jquery.fancybox.pack.js"></script>
    


<!-- Custom Scripts -->
<script src="/icarus/js/main.js"></script>

    </div>
</body>
</html>